<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/static/css/theme-chalk.css}">
    <link rel="stylesheet" th:href="@{/static/css/mid.css}">

    <link rel="shortcut icon" th:href="@{/static/icon/favicon.ico}" />
    <link rel="bookmark"  th:href="@{/static/icon/favicon.ico}"  />

    <style  type="text/css">
        [v-cloak] {
            display: none;
        }

        .el-input__inner {
            background-color: #12474e !important;
            color: #fff !important;
        }

    </style>


</head>
<body>
    <div id="app"  v-cloak>
        <div class="page-container">
            <!-- 左侧公司简介 -->
            <div class="company-intro">
                <div class="intro-title">公司简介</div>
                <div class="intro-content">
                    <p style="line-height: 28px;">我们是一家专注于<span class="highlight" style="font-weight: bold;;">大数据分析和人工智能</span>解决方案的科技公司。成立于2015年，始终致力于为企业提供最前沿的数据技术服务。从数据的收集、整理，到深入挖掘其中的潜在价值，再到运用人工智能实现智能化决策与精准预测，我们为企业构建起全流程、一站式的数据技术服务体系。</p>
                    
                    <img th:src="@{/static/img/mid/com.png}" class="intro-image" style="margin: 1px 0 !important;" alt="公司业务图片">
                    
                    <p class="table-title" style="color:#fff;font-weight: bold;">公司核心业务：</p>
                    <el-table
                        :data="businessData"
                        style="width: 100%"
                        :header-cell-style="headerStyle"
                        :cell-style="cellStyle"
                        size="small">
                        <el-table-column
                            prop="business"
                            label="业务类型"
                            width="100">
                            <template slot-scope="scope">
                                <span class="highlight">{{ scope.row.business }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="description"
                            label="业务描述"
                            show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    
                    <p class="table-title" style="color:#fff;font-weight: bold;">我们的优势：</p>
                    <el-table
                        :data="advantageData"
                        style="width: 100%"
                        :header-cell-style="headerStyle"
                        :cell-style="cellStyle"
                        size="small">
                        <el-table-column
                            prop="category"
                            label="类别"
                            width="80">
                            <template slot-scope="scope">
                                <span class="highlight">{{ scope.row.category }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="detail"
                            label="详情"
                            show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <!-- 右侧可视化部分 -->
            <div class="visualization-container">
                <div class="container">
                    <div v-for="(_, index) in nodes" 
                         :key="'line-'+index" 
                         class="connection-line"
                         :style="getLineStyle(index)">
                    </div>
                    <div v-for="(_, index) in nodes"
                         :key="'mask-'+index"
                         class="node-mask"
                         :style="getNodeMaskStyle(index)">
                    </div>
                    <div class="center-mask"></div>

                    <!-- center circle -->
                    <div class="big-data-center"
                         @click="handleCenterClick"
                         @mouseenter="showCenterTooltip($event)"
                         @mouseleave="hideTooltip">
                        <img th:src="@{/static/img/mid/role.jpeg}" class="center-icon">
                    </div>

                    <!-- data node -->
                    <div v-for="(node, index) in nodes" 
                         :key="'node-'+index"
                         class="data-node"
                         :style="getNodeStyle(index)"
                         @click="handleNodeClick(node)"
                         @mouseenter="showTooltip($event, node)"
                         @mouseleave="hideTooltip">
                        <img :src="pre + '/static/img/mid/' + node.img" class="node-icon">
                        <span class="node-title">{{ node.title }}</span>
                    </div>

                </div>
                
                <!-- 修改分页组件 -->
                <div
                     :style="paginationStyle">
                    <el-pagination
                        background
                        layout="total,sizes, prev, pager, next"
                        :page-sizes="[5,6,7,8,9]"
                        :page-size="pageSize"
                        :current-page="currentPage"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
                
                <el-dialog :title="currentNode.title" 
                           :visible.sync="dialogVisible"
                           width="30%">
                    <div>{{currentNode.description}}</div>
                </el-dialog>
            </div>

            <!-- 新增右侧用户信息 -->
            <div class="user-profile">
                <div class="user-header">
                    <img th:src="@{/static/img/mid/tx.png}" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">{{tokenJson.username}}</div>
                        <div class="user-role">{{role.name}}</div>
                        <div class="user-role">{{role.code}}</div>
                    </div>
                </div>

                <div class="user-stats">
                    <div class="stat-item" v-for="(item, index) in sssList" :key="index">
                        <div class="stat-value">{{item.value}}</div>
                        <div class="stat-label">{{item.label}}</div>
                    </div>
                </div>

                <div class="recent-activity">
                    <div class="activity-title">最近活动</div>
                    <ul class="activity-list">
                        <li class="activity-item" style="display: flex;justify-content: space-between;">
                            <div style="display: flex;align-items: center;">
                                <img :src="pre + imageUrl" class="activity-icon" alt="活动图标">
                                <div class="activity-content">
                                    <div>更新了数据分析报告</div>
                                    <div class="activity-time">2小时前</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="recent-activity">
                    <div class="activity-title">帮助链接</div>
                    <ul class="activity-list">
                        <li class="activity-item" style="display: flex;justify-content: space-between;">
                            <div style="display: flex;align-items: center;">
                                <div class="activity-content">
                                    <div @click="goLink('https://baidu.com');" style="cursor:pointer; color: rgb(176 212 220 / 81%); text-decoration: underline;">百度一下，你就知道</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="recent-activity">
                    <div class="activity-title">邀请码</div>
                    <el-input v-model.trim="gogogocode" clearable placeholder="邀请码" ></el-input>
                </div>

            </div>
        </div>
    </div>


    <!-- 引入Vue -->
    <script th:src="@{/static/js/vue.js}"></script>
    <!-- 引入组件库 -->
    <script th:src="@{/static/js/element-ui.js}"></script>
    <!-- 引入Echarts -->
    <script th:src="@{/static/js/echarts.common.min.js}"></script>
    <!-- 引入Moment -->
    <script th:src="@{/static/js/moment.js}"></script>
    <!-- 引入Axios -->
    <script th:src="@{/static/js/axios.js}"></script>

    <!-- 引入 axi :  封装后的 axios -->
    <script th:src="@{/static/js/axi.js}"></script>

    <script th:inline="text">
        new Vue({
            el: '#app',
            data() {
                return {
                    pre: '[[${pre}]]',
                    a: '[[${a}]]',
                    b: '[[${b}]]',
                    c: '[[${c}]]',
                    tokenJson: '',
                    tokenObject: '[[${tokenObject}]]',
                    token: '[[${token}]]',
                    dialogVisible: false,
                    currentNode: {},
                    centerX: 600,
                    centerY: 400,
                    imageUrl: '/static/img/mid/sms.jpg',
                    centerTip: {
                        title: '角色',
                        description: '角色'
                    },
                    sssList: [],
                    gogogocode: 'Go821KK375mnGo',
                    role: {},
                    nodeBakedList: [ ],
                    nodes: [ ],
                    advantageData: [
                        {
                            category: '技术团队',
                            detail: '拥有超过100位数据科学家和AI专家'
                        },
                        {
                            category: '核心技术',
                            detail: '自主研发的智能算法引擎'
                        },
                        {
                            category: '处理能力',
                            detail: '处理PB级数据的能力'
                        },
                        {
                            category: '技术认证',
                            detail: '获得多项国家技术专利'
                        }
                    ],
                    businessData: [
                        {
                            business: '数据分析与挖掘',
                            description: '用先进算法和工具挖掘数据价值'
                        },
                        {
                            business: '实时数据监控',
                            description: '提供24/7全天候的数据监控服务'
                        },
                        {
                            business: '智能决策支持',
                            description: '基于AI的智能决策建议系统'
                        },
                        {
                            business: '数据可视化',
                            description: '直观互动的数据展示平台'
                        }
                    ],
                    containerWidth: 800,
                    containerHeight: 600,
                    radius: 250,
                    nodeSize: 100,
                    minRadius: 200,
                    maxRadius: 350,
                    currentPage: 1,
                    pageSize: 9,
                    total: 0,
                    paginationStyle: {
                        position: 'fixed',
                        bottom: '0px',
                        left: '56%',
                        transform: 'translateX(-50%)',
                        background: 'rgba(255, 255, 255, 0.1)',
                        padding: '10px 20px',
                        borderRadius: '8px',
                        backdropFilter: 'blur(10px)',
                        zIndex: 10,
                        width: 'auto',
                        minWidth: '400px'
                    }
                }
            },
            computed: {
                dynamicRadius() {
                    const nodeCount = this.nodes.length;
                    let radius = this.radius;
                    
                    if(nodeCount <= 6) {
                        radius = this.minRadius;
                    } else if(nodeCount >= 12) {
                        radius = this.maxRadius;
                    } else {
                        const factor = (nodeCount - 6) / 6;
                        radius = this.minRadius + (this.maxRadius - this.minRadius) * factor;
                    }
                    
                    return radius;
                },
                dynamicNodeSize() {
                    const nodeCount = this.nodes.length;
                    return Math.max(70, this.nodeSize - (nodeCount - 8) * 5);
                }
            },
            methods: {

                getNodeStyle(index) {
                    const totalNodes = this.nodes.length;
                    const angleStep = (2 * Math.PI) / totalNodes;
                    const angle = index * angleStep - Math.PI / 2;
                    
                    const verticalOffset = this.nodes.length > 10 ? -30 : 0;
                    
                    return {
                        left: `calc(50% + ${Math.cos(angle) * this.dynamicRadius - this.dynamicNodeSize/2}px)`,
                        top: `calc(50% + ${Math.sin(angle) * this.dynamicRadius - this.dynamicNodeSize/2 + verticalOffset}px)`,
                        width: `${this.dynamicNodeSize}px`,
                        height: `${this.dynamicNodeSize}px`
                    };
                },
                getLineStyle(index) {
                    const totalNodes = this.nodes.length;
                    const angleStep = 360 / totalNodes;
                    const angle = index * angleStep - 90;
                    
                    // 计算中心圆的大小
                    const centerCircleSize = 150; // big-data-center 的宽度
                    
                    return {
                        width: `${this.dynamicRadius}px`,
                        transform: `
                            translateX(${centerCircleSize / 2}px)
                            rotate(${angle}deg)
                        `,
                        left: 'calc(50% - 75px)', // centerCircleSize/2
                        opacity: 0.8
                    };
                },
                handleNodeClick(node) {
                    this.currentNode = node
                    //
                    window.open(this.pre + '/html/' + node.route + node.root + '/' + 'index' + '/' + this.token + "?t=" + new Date().getTime() + "&sysinfoMicroId=" + node.id + "&gogogocode=" + this.gogogocode )
                    //
                    this.gogogocode = ''
                },
                handleCenterClick() {
                    const center = {
                        route: 'auth',
                        root: '/sysinfo/role'
                    }
                    window.open(this.pre + '/html/' + center.route + center.root + '/' + 'index' + '/' + this.token + "?t=" + new Date().getTime()  + "&gogogocode=" + this.gogogocode )
                    //
                    //
                    this.gogogocode = ''
                },
                showTooltip(event, node) {
                    const tooltip = document.createElement('div');
                    tooltip.className = 'node-tooltip';
                    tooltip.innerHTML = `
                        <strong>${node.title}</strong>
                        <br>
                        <small>${node.description}</small>
                    `;
                    
                    document.body.appendChild(tooltip);
                    
                    const rect = event.target.getBoundingClientRect();
                    const tooltipRect = tooltip.getBoundingClientRect();
                    
                    let left = event.clientX - (tooltipRect.width / 2);
                    let top = rect.top - tooltipRect.height - 10;
                    
                    if (left < 0) left = 0;
                    if (left + tooltipRect.width > window.innerWidth) {
                        left = window.innerWidth - tooltipRect.width;
                    }
                    if (top < 0) {
                        top = rect.bottom + 10;
                    }
                    
                    tooltip.style.left = `${left}px`;
                    tooltip.style.top = `${top}px`;
                },
                hideTooltip() {
                    const tooltips = document.getElementsByClassName('node-tooltip');
                    Array.from(tooltips).forEach(tooltip => tooltip.remove());
                },
                calculateCenter() {
                    const container = document.querySelector('.container');
                    if (container) {
                        const rect = container.getBoundingClientRect();
                        return {
                            x: rect.width / 2,
                            y: rect.height / 2
                        };
                    }
                    return { x: 600, y: 400 };
                },
                getNodeMaskStyle(index) {
                    const position = this.getNodeStyle(index);
                    return {
                        left: position.left,
                        top: position.top,
                        width: `${this.dynamicNodeSize + 4}px`,
                        height: `${this.dynamicNodeSize + 4}px`,
                        transform: 'translate(-2px, -2px)',
                        transition: 'all 0.5s ease-in-out'
                    };
                },
                showCenterTooltip(event) {
                    // gcc
                    this.centerTip = {
                        title: this.tokenJson.username,
                        description: this.role.name + " " + this.role.code
                    } ;
                    this.showTooltip(event, this.centerTip);
                },
                headerStyle() {
                    return {
                        background: 'rgba(0, 160, 233, 0.1)',
                        color: '#00a0e9',
                        fontWeight: 'bold',
                        border: 'none',
                        padding: '8px'
                    }
                },
                cellStyle() {
                    return {
                        background: 'rgba(255, 255, 255, 0.05)',
                        color: '#fff',
                        border: 'none',
                        padding: '8px'
                    }
                },
                updateContainerSize() {
                    const container = this.$el.querySelector('.visualization-container');
                    if (container) {
                        this.containerWidth = container.clientWidth;
                        this.containerHeight = container.clientHeight;
                    }
                },

                paginateList(list, currentPage, pageSize) {
                    const startIndex = (currentPage - 1) * pageSize;
                    const endIndex = startIndex + pageSize;
                    return list.slice(startIndex, endIndex);
                },

                handleCurrentChange(page) {
                    this.currentPage = page;
                    this.loadServices();
                },
                handleSizeChange(size) {
                    this.pageSize = size;
                    this.currentPage = 1; // 重置到第一页
                    this.loadServices();
                },
                updateNodes() {
                    // 更新节点数据
                    this.nodes = this.paginateList(this.nodeBakedList, this.currentPage, this.pageSize);
                    // 添加过渡动画类
                    this.$nextTick(() => {
                        const nodes = document.querySelectorAll('.data-node');
                        nodes.forEach(node => {
                            node.classList.add('node-transition');
                        });
                    });
                },

                goLink(url) {
                    window.open(url);
                },

                loadRole() {
                    axi.get(this,  '/auth/sysinfo/role' + '/role_by_token_id/' + this.tokenJson.id  , {},  data => {
                        if (data) {
                            this.role = data ;
                        }
                    })
                },
                loadServices() {
                    const params = {
                        cpage: this.currentPage,
                        csize: this.pageSize,
                        sort: 'seq',
                        order: 'asc'
                    };
                    axi.get(this,  '/auth/sysinfo/micro' + '/page'  , params,  data => {
                        if (data && data.list.length > 0) {
                            this.total = data.total;
                            //
                            const tmp = data.list.map(_ => {
                                _.title = _.name;
                                _.description = _.detail;
                                _.img = _.icon;
                                return _ ;
                            });
                            //
                            this.nodeBakedList = tmp;
                            //
                            this.nodes = this.paginateList(this.nodeBakedList, 1, this.pageSize);
                            this.updateContainerSize();
                            window.addEventListener('resize', this.updateContainerSize);
                        }
                    })
                }
                ,
                loadCount() {
                    // statistics
                    axi.get(this,  '/auth/sysinfo/micro' + '/statistics'  , {},  data => {
                        if (data && data.length > 0) {
                            this.sssList = data.map(_ => {
                                const obj = {}
                                obj.label = _.key1;
                                obj.value = _.value1 > 1000 ? axi.numberFormat(_.value1) : _.value1;
                                return obj;
                            })
                        }
                    })
                }
            },
            mounted() {

                this.tokenJson = JSON.parse(this.tokenObject.replace(/&quot;/g, '"')) ;

                //
                this.loadServices();
                //
                this.loadRole();
                //
                this.loadCount();

            },
            beforeDestroy() {
                window.removeEventListener('resize', this.updateContainerSize);
            }
        });
    </script>
</body>
</html> 